<script>
export default {
  name: "gourmet",
  props: {
    data: {
      default: () => ({})
    }
  },
  computed: {
    tagList() {
      // 获取并限制标签数量，最多取4个
      const tags = this.data.Tags ? this.data.Tags.split(',').map(tag => tag.trim()) : [];
      return tags.filter(tag => tag); // 过滤掉空标签
    },
    isOpen() {
      // 这里可以根据营业时间判断是否营业中
      return true;
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', this.data);
    }
  }
}
</script>

<template>
<view class="shop-container" hover-class="shop-hover" @click="handleClick">
  <view v-if="data.IsBusiness == 1" class="shop-container-logo">
    <image src="https://wzws.wanshanlundiao.cn/upload/img/ws_static/static/icon/jjks.png" mode="aspectFill" class="shop-container-logo-img" />
  </view>
  <!-- 店铺图片 -->
  <view class="shop-image">
    <image :src="data.ShopLogo" mode="aspectFill"></image>
    <view class="shop-tag" v-if="data.IsRecommend">{{ $t('merchant.common.recommended') }}</view>
  </view>
  <!-- 店铺信息 -->
  <view class="shop-info">
    <view class="shop-info-top">
      <view class="shop-name-wrap">
        <text class="shop-name">{{data.ShopName}}</text>
<!--        <view class="shop-rating">-->
<!--          <text class="rating-score">{{data.Score || 4.8}}</text>-->
<!--          <text class="rating-text">分</text>-->
<!--          <text class="monthly-sales" v-if="data.MonthlySales">月售{{data.MonthlySales}}单</text>-->
<!--        </view>-->
        <text class="shop-status" :class="{'shop-open': isOpen}">{{isOpen ? '营业中' : '休息中'}}</text>
      </view>
      <view class="shop-time">{{ $t('merchant.common.openingHours') }}：{{data.BusinessHours || '未设置营业时间'}}</view>
      <view class="shop-price">{{ $t('merchant.common.averageCost') }}：<text class="price">¥{{data.PerConsumption || '--'}}</text></view>
      <view class="shop-tags">
        <text class="tag" v-for="(tag, index) in tagList" :key="index">{{tag}}</text>
<!--        <text class="tag" v-for="(tag, index) in tagList" :key="index" v-if="index < 3">{{tag}}</text>-->
<!--        <text class="more-tags" v-if="tagList.length > 3">+{{tagList.length - 3}}</text>-->
      </view>
    </view>
    <!-- <view class="shop-bottom">
      <view class="shop-address">
        <text class="address-icon">{{ $t('merchant.common.address') }}：</text>
        <text class="address-text">{{data.Address}}</text>
      </view>
      <view class="shop-distance" v-if="data.Distance">
        <text>{{data.Distance}}km</text>
      </view>
    </view> -->
  </view>
</view>
</template>

<style scoped lang="scss">
.shop-container {
  position: relative;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(30rpx);
  animation: fadeInUp 0.5s ease forwards;
  animation-delay: calc(0.1s * var(--item-index, 0));

  &-logo {
    position: absolute;
    top: 0;
    right: 0;
    width: 120rpx;
    height: 120rpx;
    &-img {
      width: 100%;
      height: 100%;
      transform: rotate(90deg);
      transform-origin: center center;
    }
  }

  &.shop-hover {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .shop-image {
    width: 180rpx;
    height: 180rpx;
    position: relative;
    flex-shrink: 0;
    margin-right: 24rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
      object-fit: cover;
    }

    .shop-tag {
      position: absolute;
      top: 8rpx;
      left: 8rpx;
      background: linear-gradient(135deg, #ff6b6b, #ff8787);
      color: #fff;
      font-size: 20rpx;
      padding: 2rpx 10rpx;
      border-radius: 4rpx;
    }
  }

  .shop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-height: 180rpx;
    // max-height: 180rpx; /* 限制最大高度与图片一致 */

    .shop-info-top {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .shop-name-wrap {
        display: flex;
        align-items: center;
        padding: 10rpx 0;

        .shop-name {
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
          margin-right: 12rpx;
          max-width: 100%;
          word-break: break-all;
          white-space: normal;
        }

        .shop-rating {
          display: flex;
          align-items: center;
          margin-right: auto;

          .rating-score {
            color: #ff6b6b;
            font-size: 28rpx;
            font-weight: 600;
            padding: 6rpx 0;
          }

          .rating-text {
            color: #ff6b6b;
            font-size: 22rpx;
            margin-right: 12rpx;
          }

          .monthly-sales {
            color: #999;
            font-size: 22rpx;
          }
        }

        .shop-status {
          font-size: 20rpx;
          padding: 2rpx 8rpx;
          border-radius: 4rpx;
          background: #f5f5f5;
          color: #999;
          flex-shrink: 0;

          &.shop-open {
            background: rgba(#67c23a, 0.1);
            color: #67c23a;
          }
        }
      }

      .shop-time {
        font-size: 22rpx;
        color: #666;
        margin-bottom: 4rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .shop-price {
        font-size: 22rpx;
        color: #666;
        padding: 6rpx 0;

        .price {
          color: #ff6b6b;
          font-weight: 600;
        }
      }

      .shop-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rpx;
        margin-top: 6rpx;

        .tag {
          display: inline-block;
          font-size: 20rpx;
          color: #9B5734;
          background-color: #FFF4E6;
          padding: 2rpx 10rpx;
          border-radius: 6rpx;
        }

        .more-tags {
          font-size: 20rpx;
          color: #999;
        }
      }
    }

    .shop-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 6rpx;
      white-space: nowrap;

      .shop-address {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 20rpx;
        color: #999;
        margin-right: 12rpx;
        overflow: hidden;

        .address-icon {
          flex-shrink: 0;
          margin-right: 6rpx;
        }

        .address-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .shop-distance {
        font-size: 20rpx;
        color: #999;
        flex-shrink: 0;
      }
    }
  }
}
</style>
